<template>
    <div class="card_all" :title="instance.name">
        <div class="card__img">
            <img :src="instance.image_url" :alt="instance.name">
        </div>

        <div class="card__title">
            <span>{{ instance.name }}</span>
        </div>
    </div>
</template>
           
<script setup>
    import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'
    const props = defineProps(["instance"])
    

    const instance = ref(props.instance)



    onMounted(()=>{
    
    })
    
</script>
<style scoped lang="scss">
    .card_all{
        cursor: pointer;
        width: 100%;
        height: 100%;
        overflow: hidden;
        // border-radius: 15px;
        // position: relative;
        
        .card__img{
            border-radius: 15px;
            width: 100%;
            // height: 100%;
            aspect-ratio: 3 / 4;
            img{
                border-radius: 15px;
                width: 100%;
                height: 100%;
                // height: auto;
                object-fit: cover;
            }
        }
        .card__title{
            width: 100%;
            height: 30px;
            display: flex;
            // justify-content: center;
            align-items: center;
            padding: 0 5px;
            font-size: 18px;
            // color: #fff;
            
            user-select: none;
            span{
                width: 100%;
                white-space: nowrap;   // 防止文本换行
                overflow: hidden;      // 隐藏溢出的文本
                text-overflow: ellipsis; // 显示省略号
            }
        }
    }
</style>